<template>
    <div class="my-list">
        
        <ul class="box" v-if="songList.length != 0">
            <li v-for="item in songList">
                <!-- {{ item }} -->
                <div>
                    <img v-if="item.al.picUrl" :src="item.al.picUrl" alt="">
                </div>
                <router-link :to="{path:'/songdetail?id='+ item.id+'&rid='+rid}">
                    <h4 class="left">{{ item.name }}</h4>
                    <p>{{ item.str }}</p>
                    <p>{{ item.publishTime | formaTime }}</p>
                </router-link>
            </li>
        </ul>
        <div class="abs" v-else><loading-comp v-if="isLoading"></loading-comp></div>
         
    </div>
</template>

<style lang="scss">
.my-list {
    ul.box {
        li {
            min-height: 1.8667rem;
            width: 100%;
            display: flex;
            align-items: center;
            margin-top: .2667rem;
            border-bottom: 1px solid #ccc;
            padding: 0 .2667rem .1333rem;
            img {
                width: 1.6rem;
                height: 1.6rem;
                border-radius: 5px;
                margin: 0 .2667rem 0 0;
                vertical-align: middle;
            }
            a {
                width: 100%;
            }

            p {
                padding: .1333rem 0 0 0 ;
                font-size: .4rem;
                color: #666;
                &:nth-of-type(1){
                    font-size: 13px;
                }
            }
        }
    }
}
</style>

<script>
// import { addTopDetail } from '@/request';
import { addPlayDetail } from '@/request';
import moment from 'moment';
import LoadingComp from './loading-comp.vue';

export default {
    components: {LoadingComp},
    name:'top-list',
    data() {
        return {
            songList: [],
            page: 0,
            pageSize: 10,
            rid: '',
            isLoading: true,
        }
    },
    filters: {
        formaTime(value) {
            return moment(value).format('YYYY-MM-DD hh:mm:ss')
        }
    },
    watch:{
        // rid(n,o){
        //     console.log(n)
        //     // this.getTopDetail(n);
        // },
        // 监听路由变化
        $route:{
            deep: true,
            handler(n,o){
                this.rid = n.params.id;
                this.getPlayDetail(this.rid);
            }
        }
    },
    created() {
        this.rid = this.$route.params.id;
        this.getPlayDetail(this.rid);
    },
    methods: {
        async getPlayDetail(id) {
            this.isLoading = true;
            this.songList = [];
            await addPlayDetail({ id }).then(
                content => {
                    console.log(content)
                    if (content.code == 200) {
                        setTimeout(()=>{
                            let { playlist: { trackIds, tracks } } = content
                            let arr = tracks.map((item, i) => {
                                let { al, ar, name, publishTime , id} = item;
                                let str = '';
                                // console.log(ar);
                                if(Array.isArray(ar)){
                                    ar.forEach(opt=>{
                                        str += opt.name+' / '
                                    })
                                    str = str.substring(0,str.length-2);
                                }
                                return { al, ar, name, publishTime ,str , id};
                            })
                            // 截取是10条记录
                            let start = this.page * this.pageSize;
                            let end = start + this.pageSize;
                            // console.log(arr.slice(start, end))
                            this.songList = arr.slice(start, end);
                            this.isLoading = false;
                        },300)
                        
                    }
                }
            )
            
        }
    }
}
</script>